<template>
  <sv-page>
    <view class="errorexam">
      <view class="sv-uv-swipe-action">
        <uv-swipe-action>
          <uv-swipe-action-item
            :options="options"
            v-for="(item, index) in errorExamData"
            :key="item.exam_id"
            @click="onFav(item)"
          >
            <view class="error-exam-item" @click="onExam(item, index)">
              <view class="error-exam-item-title">
                <text>题库：</text>
                <text class="text-grey">{{ buyLibMap[item.from_lib] }}</text>
                <view class="type-tag">{{ examConfig.paperTypeDict[item.exam_type] }}</view>
              </view>
              <rich-text :nodes="item.exam_title"></rich-text>
            </view>
          </uv-swipe-action-item>
        </uv-swipe-action>
      </view>
    </view>
  </sv-page>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad, onPullDownRefresh } from '@dcloudio/uni-app'
import { store } from '@/uni_modules/sv-id-pages/common/store'
import { buyLibList, errorExamDelete, errorExamList } from '@/service/api/record'
import { cloneDeep } from 'lodash'
import examConfig from '@/uni_modules/sv-exam/components/sv-exam/config.js'

const errorExamData = ref([])
const buyLibMap = ref({})

const options = [{ text: '删除', style: { backgroundColor: '#f56c6c' } }]

onPullDownRefresh(async () => {
  await handleInit()
  uni.stopPullDownRefresh()
})

onLoad(async () => {
  uni.showLoading({ title: '加载中' })
  await handleInit()
  uni.hideLoading()
})

async function handleInit() {
  const errorExamRes = await errorExamList({ user_id: store.userInfo._id })
  errorExamData.value = errorExamRes.data || []
  const buyLibRes = await buyLibList({ user_id: store.userInfo._id })
  buyLibMap.value = buyLibRes.data.reduce((acc, cur) => {
    acc[cur.lib_id] = cur.lib_name
    return acc
  }, {})
}

function onFav(e) {
  uni.showModal({
    title: '系统提示',
    content: '确定删除该易错题吗？',
    showCancel: true,
    success: async ({ confirm }) => {
      if (confirm) {
        const deleteRes = await errorExamDelete({ user_id: store.userInfo._id, exam_id: e.exam_id })
        uni.showToast({ title: deleteRes.message })
        // 从列表中移除该试题
        errorExamData.value = errorExamData.value.filter((item) => item.exam_id !== e.exam_id)
      }
    }
  })
}

function onExam(item, index) {
  uni.navigateTo({
    url: '/pages/exam/simple-exam',
    success(res) {
      res.eventChannel.emit('e-transmit-exams', {
        title: '易错题',
        item,
        index,
        data: cloneDeep(errorExamData.value) // 深拷贝，防止数据污染
      })
    }
  })
}
</script>

<style lang="scss">
.errorexam {
  padding: 24rpx;
  box-sizing: border-box;

  .sv-uv-swipe-action {
    .uv-swipe-action-item {
      margin-bottom: 24rpx;
      border-radius: 20rpx;
      box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
      border-top: 1rpx solid rgba(255, 255, 255, 0.4);
      border-left: 1rpx solid rgba(255, 255, 255, 0.4);
      backdrop-filter: blur(8px) brightness(110%);

      .error-exam-item {
        padding: 20rpx 24rpx;
        box-sizing: border-box;

        @include useTheme {
          background-color: getTheme('sv-background-highlight-color');
        }

        &-title {
          margin-bottom: 20rpx;

          .type-tag {
            float: right;
            background-color: #01beff;
            color: #ffffff;
            padding: 2rpx 8rpx;
            font-size: 12px;
            border-radius: 8rpx;
          }
        }
      }
    }
  }
}
</style>
